import StoreComparison from './spark';
import { useBasicDataStore } from '@/stores/basicDataStore';
import { useCmpDataStore } from '@/stores/cmpDataStore';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';


const Report = () => {

  const basicData = useBasicDataStore(state => state.basicData) as StoreInfo
  const cmpData = useCmpDataStore(state => state.cmpData) as StoreInfo

  const storesInfo = [
    {
      storeName: basicData.basicInfo.storeName,
      storeType: basicData.basicInfo.storeType,
      storeTag: basicData.basicInfo.tags[0],
      openingDate: basicData.basicInfo.openingDate,
      areaSize: basicData.basicInfo.areaSize,
      avgCustomerValue: basicData.annualData.avgCustomerValue,
      rating: basicData.annualData.rating,
      posReviews: basicData.annualData.reviews.positive,
      negReviews: basicData.annualData.reviews.negative,
      yearAmount: basicData.annualData.yearAmount,
      yearGrowth: basicData.annualData.yearGrowth
    },
    {
      storeName: cmpData.basicInfo.storeName,
      storeType: cmpData.basicInfo.storeType,
      storeTag: cmpData.basicInfo.tags[0],
      openingDate: cmpData.basicInfo.openingDate,
      areaSize: cmpData.basicInfo.areaSize,
      avgCustomerValue: cmpData.annualData.avgCustomerValue,
      rating: cmpData.annualData.rating,
      posReviews: cmpData.annualData.reviews.positive,
      negReviews: cmpData.annualData.reviews.negative,
      yearAmount: cmpData.annualData.yearAmount,
      yearGrowth: cmpData.annualData.yearGrowth
    },
  ]

  return (
    <div>
      <StoreComparison stores={storesInfo} />
    </div>
  );
};

export default Report